import styles from "./index.module.less"
class PageLine {
	static get toolbox() {
		return {
			title: "pageLine",
			icon: `<svg fill="#000000" width="800px" height="800px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" d="M21,2 L21,7 C21,8.1045695 20.1045695,9 19,9 L5,9 C3.8954305,9 3,8.1045695 3,7 L3,2 L5,2 L5,7 L19,7 L19,2 L21,2 Z M21,22 L19,22 L19,17 L5,17 L5,22 L3,22 L3,17 C3,15.8954305 3.8954305,15 5,15 L19,15 C20.1045695,15 21,15.8954305 21,17 L21,22 Z M4,11 L4,13 L2,13 L2,11 L4,11 Z M7,11 L7,13 L5,13 L5,11 L7,11 Z M10,11 L10,13 L8,13 L8,11 L10,11 Z M13,11 L13,13 L11,13 L11,11 L13,11 Z M16,11 L16,13 L14,13 L14,11 L16,11 Z M19,11 L19,13 L17,13 L17,11 L19,11 Z M22,11 L22,13 L20,13 L20,11 L22,11 Z"/>
      </svg>`,
		}
	}

	static get isReadOnlySupported() {
		return true
	}

	constructor({ data, api, config, readOnly }) {
		this.data = {
			color: data.color || "",
		}

		this.readOnly = readOnly
		this.api = api

		this.config = config || {}

		this.wrapper = undefined
	}

	render() {
		this.wrapper = document.createElement("div")
		this.wrapper.classList.add(styles["cx-custom-pageLine"])

		return this.wrapper
	}

	save(blockContent) {
		return this.data
	}
}

export default PageLine
